<template>
  <div style="display: flex; align-items: center">
    <el-button type="text" @click="showDialog">选择图标</el-button>
    <span style="padding: 0 10px">{{ selectIcon }}</span>
    <el-icon :size="16">
      <component :is="selectIcon"></component>
    </el-icon>
  </div>
  <el-dialog
    v-model="dialogVisible"
    width="600px"
    :modal="false"
    :show-close="false"
  >
    <template v-for="(iconName, index) in iconList">
      <span
        style="padding: 5px; cursor: pointer"
        class="hover-shadow"
        @click="handleClick(iconName)"
        v-if="iconName"
      >
        <el-icon :size="20">
          <component :is="iconName"></component>
        </el-icon>
      </span>
      <div
        v-else
        style="text-align: center; cursor: pointer"
        @click="handleClick('')"
      >
        <el-tag class="mx-1" size="large">没有看中喜欢的图标~</el-tag>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
const props = defineProps({
  modelValue: String,
});
const emit = defineEmits(["update:modelValue", "blur"]);

const iconList = [
  "addLocation",
  "aim",
  "alarmClock",
  "apple",
  "arrowDownBold",
  "arrowDown",
  "arrowLeftBold",
  "arrowLeft",
  "arrowRightBold",
  "arrowRight",
  "arrowUpBold",
  "arrowUp",
  "avatar",
  "back",
  "baseball",
  "basketball",
  "bellFilled",
  "bell",
  "bicycle",
  "bottomLeft",
  "bottomRight",
  "bottom",
  "bowl",
  "box",
  "briefcase",
  "brushFilled",
  "brushFilled",
  "brush",
  "burger",
  "calendar",
  "cameraFilled",
  "camera",
  "caretBottom",
  "caretLeft",
  "caretRight",
  "cellphone",
  "chatDotRound",
  "chatDotSquare",
  "chatLineRound",
  "chatLineSquare",
  "chatRound",
  "chatSquare",
  "check",
  "checked",
  "cherry",
  "chicken",
  "circleCheckFilled",
  "circleCheck",
  "circleCloseFilled",
  "circleClose",
  "circlePlusFilled",
  "circlePlus",
  "clock",
  "closeBold",
  "close",
  "cloudy",
  "coffeeCup",
  "coffee",
  "coin",
  "coldDrink",
  "collectionTag",
  "collection",
  "comment",
  "compass",
  "connection",
  "coordinate",
  "copyDocument",
  "cpu",
  "creditCard",
  "crop",
  "dArrowLeft",
  "dArrowRight",
  "dCaret",
  "dataAnalysis",
  "dataBoard",
  "dataLine",
  "deleteFilled",
  "deleteLocation",
  "delete",
  "dessert",
  "discount",
  "dishDot",
  "dish",
  "documentAdd",
  "documentChecked",
  "documentCopy",
  "documentDelete",
  "documentRemove",
  "document",
  "drizzling",
  "editPen",
  "edit",
  "elemeFilled",
  "eleme",
  // "elementPlus",
  "expand",
  "failed",
  "female",
  "files",
  "film",
  "filter",
  "finished",
  "firstAidKit",
  "flag",
  "fold",
  "folderAdd",
  "folderChecked",
  "folderDelete",
  "folderOpened",
  "folderRemove",
  "folder",
  "food",
  "football",
  "forkSpoon",
  "fries",
  "fullScreen",
  "gobletFull",
  "gobletSquareFull",
  "gobletSquare",
  "goblet",
  "goodsFilled",
  "goods",
  "grape",
  "grid",
  "guide",
  "headset",
  "helpFilled",
  "help",
  "hide",
  "histogram",
  "homeFilled",
  "hotWater",
  "house",
  "iceCreamRound",
  "iceCreamSquare",
  "iceCream",
  "iceDrink",
  "iceTea",
  "infoFilled",
  "iphone",
  "key",
  "knifeFork",
  "lightning",
  "link",
  "list",
  "loading",
  "locationFilled",
  "locationInformation",
  "location",
  "lock",
  "lollipop",
  "magicStick",
  "magnet",
  "male",
  "management",
  "mapLocation",
  "medal",
  "menu",
  "messageBox",
  "message",
  "mic",
  "microphone",
  "milkTea",
  "minus",
  "money",
  "monitor",
  "moonNight",
  "moon",
  "moreFilled",
  "more",
  "mostlyCloudy",
  "mouse",
  "mug",
  "muteNotification",
  "mute",
  "noSmoking",
  "notebook",
  "notification",
  "odometer",
  "officeBuilding",
  "open",
  "operation",
  "opportunity",
  "orange",
  "paperclip",
  "partlyCloudy",
  "pear",
  "phoneFilled",
  "Phone",
  "pictureFilled",
  "pictureRounded",
  "picture",
  "pieChart",
  "place",
  "platform",
  "plus",
  "pointer",
  "position",
  "postcard",
  "pouring",
  "present",
  "priceTag",
  "printer",
  "promotion",
  "questionFilled",
  "rank",
  "readingLamp",
  "reading",
  "refreshLeft",
  "refreshRight",
  "refresh",
  "refrigerator",
  "removeFilled",
  "remove",
  "right",
  "scaleToOriginal",
  "school",
  "scissor",
  "search",
  "select",
  "sell",
  "semiSelect",
  "service",
  "setUp",
  "setting",
  "share",
  "ship",
  "shop",
  "shoppingBag",
  "shoppingCartFull",
  "shoppingCart",
  "smoking",
  "soccer",
  "soldOut",
  "sortDown",
  "sortUp",
  "sort",
  "stamp",
  "starFilled",
  "star",
  "stopwatch",
  "successFilled",
  "sugar",
  "suitcase",
  "sunny",
  "sunrise",
  "sunset",
  "switchButton",
  "switch",
  "takeawayBox",
  "ticket",
  "tickets",
  "timer",
  "toiletPaper",
  "tools",
  "topLeft",
  "topRight",
  "top",
  "trendCharts",
  "trophy",
  "turnOff",
  "umbrella",
  "unlock",
  "uploadFilled",
  "upload",
  "userFilled",
  "user",
  "van",
  "videoCameraFilled",
  "videoCamera",
  "videoPause",
  "videoPlay",
  "view",
  "walletFilled",
  "wallet",
  "warningFilled",
  "warning",
  "watch",
  "watermelon",
  "windPower",
  "zoomIn",
  "zoomOut",
  "",
];

const dialogVisible = ref(false);
const showDialog = () => {
  dialogVisible.value = true;
};

const handleClick = (iconName: string) => {
  selectIcon.value = iconName;
  dialogVisible.value = false;
};

const revert_data = (d: any) => {
  emit("update:modelValue", d);
  if (!d) selectIcon.value = "";
};

const selectIcon = ref<string>();
watch(props, (newVal) => (selectIcon.value = newVal.modelValue));
watch(selectIcon, (newVal) => revert_data(newVal));
selectIcon.value = props.modelValue;
</script>

<style lang="scss" scoped></style>
